<template>
	<view>
		<view class="header-box">
			<view class="row-box" style="font-size: 30rpx;font-weight: 900;margin-top: 30rpx; padding: 0 28rpx;">
				<text>{{userInfo.recoveryName + ' ' + userInfo.nickName}}</text>
			</view>
			<view class="row-box" style="padding: 0 28rpx;">
				<view class="time-box row-box" style="width: 50%;">
					<view class="drop-box"></view>
					<view>
						<text>{{new Date().getDate() + "/"}}</text>
						{{getTimeStr()}}
					</view>
				</view>
				
				<view class="stat-box">
					<view>报单量</view>
					<view>{{workInfo.offerCount}}单</view>
				</view>
				
				<view class="stat-box">
					<view>成交</view>
					<view>{{workInfo.successCount}}单</view>
				</view>
			</view>
			
			<view class="section-box">
				<u-subsection 
					:list="sectionList" 
					mode="button" 
					active-color="#19be6b" 
					inactive-color="#606266" 
					font-size="16" 
					:current="sectionIdex" 
					bg-color="#dbf1e1"
					@change="subsectionChange"
					custom-style="height:80rpx"
			></u-subsection>
			
			<view style="position: absolute;top: 260rpx;left: 200rpx;"><u-badge max="99" :value="workInfo.waitOfferCount"></u-badge></view>
			<view style="position: absolute;top: 260rpx;left: 420rpx;"><u-badge max="99" :value="workInfo.alreadyOfferCount"></u-badge></view>
			<view style="position: absolute;top: 260rpx;left: 640rpx;"><u-badge max="99" :value="workInfo.waitPayCount"></u-badge></view>
			</view>
		</view>
		
		<view class="list-box">
			<view class="item-box" v-for="(item, key) in goodsList">
				<view class="row-box title-box">
					<view style="width: 80%;">{{item.companyName}}</view>
					<view style="width: 20%;text-align: right;" v-if="sectionIdex !== 2">
						<u-count-down :time="getCountdown(item.createTime)" format="mm:ss" @finish="countDownFinish(key)"></u-count-down>
					</view>
				</view>
				<view class="row-box date-box">
					<view style="width: 60%;">门店：{{item.shopName}}</view>
					<view style="width: 40%;text-align: right;">{{item.createTime}}</view>
				</view>
				
				<!-- 基本信息 -->
				<view class="info-box row-box">
					<view>
						<image style="width: 120rpx;height: 120rpx;" :src="item.fileUrls[0]"></image>
					</view>
					<view style="margin-left: 20rpx;">
						<view style="font-size: 32rpx;font-weight: 900;">{{item.modelName}}</view>
						<view>{{item.specs}}</view>
					</view>
				</view>
				
				<view style="width: 280rpx;margin-left: 360rpx;">
					<u-button type="success" shape="circle" plain @click="goDetails(item.id)">
						{{sectionIdex === 2 ? '去支付':'去报价'}}
						<u-badge :isDot="true" :show="item.msgNoReadCount > 0"></u-badge>
					</u-button>
				</view>
			</view>
		</view>
		
		<view class="flush-box" @click="flush()">
			<view class="center-box">
				<u-icon name="reload" color="#18b566" size="28"></u-icon>
			</view>
			<view class="center-box">
				刷新
			</view>
		</view>
	</view>
</template>

<script>
	import {getMonthAndDay} from "@/utils/dateUtils.js"
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync(this.$constant.ROLE_INFO_KEY),
				sectionList: ['待报价', '报价中', '待支付'],
				sectionIdex: 0,
				goodsList: [],
				workInfo: {
					//报价量
					offerCount: 0,
					//成交量
					successCount: 0,
					//待报价数量
					waitOfferCount: 0,
					//已报价数量
					alreadyOfferCount: 0,
					//待支付数量
					waitPayCount: 0
				},
			}
		},
		created() {
			this.getList();
			this.getNumber();
			uni.$on("quoterIndexFlush", () => {
				this.getList();
				this.getNumber();
			})
		},
		methods: {
			flush() {
				uni.showToast({
					title: "加载中",
					icon: "loading"
				})
				this.getList();
				this.getNumber();
			},
			getCountdown(time) {
				let now = new Date().getTime(); //当前时间
				let start = new Date(time);
				let end = start.getTime() + (1000 * 60 * 10);
				return end - now;
			},
			getNumber() {
				this.$request("/appRecoverApi/order/queryRecoverWorkCount", "get").then(res => {
					this.workInfo = res.data;
				})
			},
			//获取列表
			getList() {
				let params = {
					offerStatus: this.sectionIdex
				}
				if(this.sectionIdex === 2)
					params.offerStatus = 3;
				this.$request("/appRecoverApi/order/inquiryOrder/list", "get", params).then(res => {
					this.goodsList = res.rows;
					this.goodsList.forEach(it => {
						it.specs = it.specs.replace(",", " ")
					})
				})
			},
			goDetails(id) {
				uni.navigateTo({
					url: "/pages/store/inquiry/details?id=" + id
				})
			},
			// 倒计时结束事件
			countDownFinish(e) {
				console.log("计时结束");
				this.getList();
			},
			// 分段器选择事件
			subsectionChange(e) {
				this.sectionIdex = e;
				this.getList();
			},
			/* 获取时间字符串 */
			getTimeStr() {
				return getMonthAndDay();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-box {
		background-image: linear-gradient(#71d5a1,#18b566);
		height: 270rpx;
		position: fixed;
		z-index: 999;
		top: 0;
		width: 100vw;
		color: #fff;
		.time-box {
			margin-top: 20rpx;
			font-size: 32rppx;
			padding: 20rpx 0;
			text {
				font-size: 40rpx; 
				font-weight: 900;
			}
		}
		.stat-box {
			padding-top: 30rpx;
			font-size: 26rpx;
			width: 25%;
		}
		.section-box {
			margin-top: 30rpx;
			padding: 40rpx 28rpx;
			border-radius: 50rpx;
			background-color: #f2f8fc;
		}
	}
	.drop-box {
		background-color: $uni-color-warning;
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		margin-top: 20rpx;
		margin-right: 20rpx;
	}
	.list-box {
		margin-top: 380rpx;
		.item-box {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			margin: 30rpx;
			line-height: 60rpx;
			.title-box {
				font-size: 32rpx;
				font-weight: 600;
			}
			.date-box {
				font-size: 22rpx;
			}
			.info-box {
				margin-top: 20rpx;
			}
		}
	}
	.badge-box {
		position: absolute;
		margin-top: -60rpx;
		view {
			margin-left: 190rpx;
		}
	}
	.flush-box {
		position: fixed;
		right: 20rpx;
		bottom: 260rpx;
		background-color: #fff;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		border: 1px solid #71d5a1;
		font-size: 26rpx;
		color: #18b566;
	}
</style>
